<template>
  <div class="appointment-record">
    <header>
      <el-button type="primary" class="el-icon-s-order" @click="appRuleShow"> 预约规则</el-button>
    </header>

    <section>
      <el-table :data="recodeData" height="100%" border>
        <el-table-column label="会员昵称" prop="nickname" align="center"/>
        <el-table-column label="手机号码" prop="mobilePhone" align="center"/>
        <el-table-column label="会员类型" prop="" align="center">
          <template slot-scope="scope">
            {{scope.row.vipStatus | vipStatusFilter}}
          </template>
        </el-table-column>
        <el-table-column label="预约车牌" prop="carNumber" align="center"/>
        <el-table-column label="预约车场" prop="parkName" align="center"/>
        <el-table-column label="预约入场时间" prop="reserveBeginTime" align="center"/>
        <el-table-column label="预约状态" prop="reserveStatus" align="center"/>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="detailsShow = true;id = scope.row.id">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <footer>
      <el-pagination
        :current-page="searchForm.currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="100"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top: 10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <el-dialog :visible.sync="detailsShow" width="500px" :close-on-click-modal="false" :close-on-press-escape="false">
      <recordDetails v-if="detailsShow" :id="id" @closeDialog="detailsShow = false" @refresh="" />
    </el-dialog>


  </div>
</template>

<script>
  import recordDetails from './components/recordDetails.vue'

  export default {
    name: 'appointment-record',
    components: { recordDetails },
    filters: {
      vipStatusFilter(status) {
        return status == 1 ? '正式会员' : '潜在会员'
      }
    },
    data() {
      return {
        recodeData: [],
        detailsShow: false,
        searchForm: {
          currentPage: 1,
          pageSize: 10
        },
        total: null,
      }
    },
    mounted() {
      this.getReserveRecordPage();
    },
    methods: {
      appRuleShow() {
        this.$emit('switch',true);
      },
      getReserveRecordPage() {
        this.$axios({
          method: 'post',
          url: '/park/reserve-record/reserveRecordPage',
          data: this.searchForm
        }).then(res => {
          this.recodeData = res.data.records;
          this.total = res.data.total;
        })
      },



      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getReserveRecordPage();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchForm.currentPage = val;
        this.getReserveRecordPage();
      }
    }
  }
</script>

<style scoped>
  .appointment-record {
    height: 100%;
  }
  header {
    height: 50px;
  }
  section {
    height: calc(100% - 80px);
  }
  footer {
    height: 50px;
    width: 100%;
  }

</style>
